import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import viteCompression from 'vite-plugin-compression';
import postCssPxToRem from 'postcss-pxtorem';
import { visualizer } from 'rollup-plugin-visualizer';
import { createViteProxy, getRootPath, getSrcPath } from './build';

export default defineConfig((configEnv: any) => {
  const rootPath = getRootPath();
  const srcPath = getSrcPath();
  const viteEnv = loadEnv(configEnv.mode, process.cwd());
  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'Y';
  const envConfig = {
    localHost: viteEnv.VITE_SERVICE_ENV_URL,
    proxyPattern: '/proxy-pattern'
  };
  const myProxy = createViteProxy(isOpenProxy, envConfig);
  return {
    base: viteEnv.VITE_BASE_URL,
    plugins: [
      vue(),
      Components({
        resolvers: [AntDesignVueResolver()]
      }),
      viteCompression({
        threshold: 10240 // // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
      }),
      vueJsx(),
      visualizer()
    ],
    server: {
      host: '0.0.0.0',
      open: true,
      port: 8000,
      proxy: myProxy

      // proxy: {
      //   '/api': {
      //     target: 'http://192.168.3.201:8000',
      //     changeOrigin: true,
      //     rewrite: path => path.replace(new RegExp(`/^\/api`), '')
      //   }
      // }

      // proxy: {
      //   '/api': {
      //     // target: 'http://127.0.0.1:8081',
      //     target: 'http://124.221.177.11',
      //     // ws: true,
      //     changeOrigin: true,
      //     rewrite: path => path.replace(/^\/api/, '')
      //   }
      // }
    },
    resolve: {
      alias: {
        '~': rootPath,
        '@': srcPath
      }
      // 忽略后缀名的配置选项,vue不建议这样做，因为会影响IDE和类型支持
      //extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
    },
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern' // 强制使用现代 API[citation:3]
          // 如果你之前在这里有其他 SCSS 配置（比如下面这行），请保留它们
          // additionalData: `@import "@/styles/variables.scss";`
        }
      },
      postcss: {
        plugins: [
          // postcsspxtoviewport({
          //   unitToConvert: 'px', // 要转化的单位
          //   viewportWidth: 1920, // UI设计稿的宽度
          //   unitPrecision: 6, // 转换后的精度，即小数点位数
          //   propList: ['!min-height', '!min-width', '*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          //   viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          //   fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          //   selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
          //   minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          //   mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          //   replace: true, // 是否转换后直接更换属性值
          //   exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          //   landscape: false // 是否处理横屏情况
          // })
          postCssPxToRem({
            rootValue: 16, // 1rem的大小
            propList: ['!min-height', '!min-width', '*'], // 需要转换的属性，最小高度和最小宽度不进行转换
            unitPrecision: 5, //保留rem小数点多少位
            selectorBlackList: ['ignore'], //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
            mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
            minPixelValue: 1 //px小于12的不会被转换
          })
        ]
      }
    },
    build: {
      // minify: false,
      rollupOptions: {
        output: {
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js',
          assetFileNames: '[ext]/[name]-[hash].[ext]',
          manualChunks(id) {
            // 简单分割一下 达到优化目的即可
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          }
        }
      }
    }
  };
});
